<template>
  <a-card :body-style="{ overflowY: 'auto', height: '100%' }" class="ax__template h-[100%]">
    <a-flex vertical class="h-[100%]" v-if="genInterface === 'DB_TABLE'">
      <TableHeadVue />
      <TableVue />
    </a-flex>
    <template v-else-if="genInterface === 'IMPORT_DB'">
      <ImportDb />
    </template>
    <template v-else-if="genInterface === 'CONFIG'">
      <Column />
    </template>
  </a-card>
</template>

<script setup lang="ts">
import { genInterface } from './data/table';
import Column from './subpage/column/Column.vue';
import ImportDb from './subpage/import-db/ImportDb.vue';
import TableHeadVue from './table/head.vue';
import TableVue from './table/table.vue';

onMounted(() => {
  genInterface.value = 'DB_TABLE';
});
</script>

<style lang="scss" scoped>
.system__module {
  overflow: hidden;
}
</style>
